'use client'

import { useAccount, useConnect, useDisconnect } from 'wagmi'
import '../globals.css'
import MyHeader from '../comm/head';
import Footer from '../comm/footer';
import React from 'react';
import * as echarts from 'echarts';
import { useEffect } from 'react';

export default function My() {
    useEffect(() => {
    const chartDom = document.getElementById('prediction-chart');
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      const option = {
        animation: false,
        color: ['#6366f1', '#e5e7eb'],
        title: {
          text: '预测准确率',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#111827',
            fontSize: 16,
            fontWeight: 500
          }
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 75, name: '正确预测' },
              { value: 25, name: '错误预测' }
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  }, []);

  return (
    <div className="min-h-screen bg-gray-50">
        <MyHeader />
      {/* 顶部导航栏 */}
      <nav className="bg-white shadow-sm h-16 fixed w-full top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
          <button className="text-gray-600 hover:text-gray-900 !rounded-button whitespace-nowrap">
            <i className="fas fa-arrow-left mr-2"></i>
            返回
          </button>
          <h1 className="text-xl font-semibold text-gray-900">预测结果</h1>
          <button className="text-gray-600 hover:text-gray-900 !rounded-button whitespace-nowrap">
            <i className="fas fa-share-alt"></i>
          </button>
        </div>
      </nav>

      {/* 主要内容区域 */}
      <main className="pt-20 pb-8 max-w-7xl mx-auto px-4">
        {/* 预测事件详情卡片 */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-2xl font-semibold text-gray-900">2024 LPL 春季赛 TES vs JDG</h2>
            <span className="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded">电竞赛事</span>
          </div>
          <div className="flex items-center text-gray-600 mb-4">
            <i className="far fa-clock mr-2"></i>
            <span>比赛时间：2024 年 3 月 15 日 19:00</span>
          </div>
          <div className="grid grid-cols-2 gap-4 mb-4">
            <div className="bg-gray-50 p-4 rounded-lg text-center">
              <img src="https://ai-public.mastergo.com/ai/img_res/d043e82b3e2a2a1ce0decf6be79be5c2.jpg" 
                   alt="TES战队" 
                   className="w-20 h-20 mx-auto mb-2 object-cover"
              />
              <div className="font-semibold">TES</div>
            </div>
            <div className="bg-gray-50 p-4 rounded-lg text-center">
              <img src="https://ai-public.mastergo.com/ai/img_res/11dbeb358e24624172b799a41cc4b896.jpg" 
                   alt="JDG战队" 
                   className="w-20 h-20 mx-auto mb-2 object-cover"
              />
              <div className="font-semibold">JDG</div>
            </div>
          </div>
        </div>

        {/* 预测结果展示 */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
          <div className="text-center mb-8">
            <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-100 mb-4">
              <i className="fas fa-check text-green-600 text-xl"></i>
            </div>
            <h3 className="text-xl font-semibold text-gray-900 mb-2">恭喜您预测成功！</h3>
            <p className="text-gray-600">获得 500 积分奖励</p>
          </div>

          <div className="grid grid-cols-2 gap-6 mb-8">
            <div className="text-center">
              <div className="text-sm text-gray-600 mb-2">您的预测</div>
              <div className="font-semibold text-lg">TES 获胜</div>
            </div>
            <div className="text-center">
              <div className="text-sm text-gray-600 mb-2">实际结果</div>
              <div className="font-semibold text-lg">TES 3:1 JDG</div>
            </div>
          </div>

          <div className="h-64" id="prediction-chart"></div>
        </div>

        {/* 历史战绩 */}
        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">历史预测记录</h3>
          <div className="space-y-4">
            {[
              { event: 'EDG vs RNG', date: '2024-03-10', result: '预测成功', reward: 300 },
              { event: 'WBG vs LNG', date: '2024-03-08', result: '预测失败', reward: 0 },
              { event: 'BLG vs OMG', date: '2024-03-05', result: '预测成功', reward: 400 }
            ].map((record, index) => (
              <div key={index} className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
                <div>
                  <div className="font-medium text-gray-900">{record.event}</div>
                  <div className="text-sm text-gray-600">{record.date}</div>
                </div>
                <div className="text-right">
                  <div className={`font-medium ${record.result === '预测成功' ? 'text-green-600' : 'text-red-600'}`}>
                    {record.result}
                  </div>
                  <div className="text-sm text-gray-600">
                    {record.reward > 0 ? `+${record.reward} 积分` : '无奖励'}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 底部按钮组 */}
        <div className="flex gap-4">
          <button className="flex-1 bg-indigo-600 text-white py-3 !rounded-button whitespace-nowrap hover:bg-indigo-700 transition-colors">
            继续预测
          </button>
          <button className="flex-1 bg-gray-100 text-gray-700 py-3 !rounded-button whitespace-nowrap hover:bg-gray-200 transition-colors">
            分享结果
          </button>
        </div>
      </main>
      <Footer />
    </div>
  );
}